<template>
	<view class="demo-slider-range">
		<view class="Title" style="position: fixed;top: 0;left: 0;width: 100%;z-index: 100;background: #fff;">
			<view class="border-bt" :style="{ 'margin-top': statusBar + 'px' }" style="height: 44px;line-height: 44px;">
				<text style="font-size: 18px;font-weight: bold;padding-left: 15px;">排行</text>
				<image style="width: 20px;height: 20px;float: right;margin-top: 11px;margin-right: 20px;" @tap="$go('./so')" src="/static/img/shaixuan.svg" mode=""></image>
				<image
					style="width: 20px;height: 20px;float: right;margin-top: 11px;margin-right: 20px;"
					@tap="$go('../center/mycang')"
					src="/static/img/guanzhus.svg"
					mode=""
				></image>
			</view>
		</view>
		<view class="box" style="padding: 0 15px;" v-for="(o, index) in list" :style="{ 'margin-top': index == 0 ? statusBar + 44 + 15 + 'px' : '15px' }">
			<view class="top" @tap="$go('./more?title=' + o.title + '&point=' + o.point)">
				<text style="font-size: 18px;font-weight: 650;">{{ o.title }}</text>
				<image src="/static/img/right.svg" style="width: 15px;height: 13px;float: right;margin-top:5rpx;" mode=""></image>
			</view>
			<text class="desc" style="font-size: 14px;color: #acacac;line-height: 17px;display: block;padding-top: 6px;">{{ o.text }}</text>
			<view class="list">
				<view
					class="lst-item border-bt"
					style="padding: 15px 0;overflow: hidden;"
					v-for="(i, indexs) in o.traderList"
					
				>
					<image
						@tap="$go('/pages/echart/echart?obj=' + JSON.stringify(i))"
						:src="i.headPortrait"
						style="width: 60px;float: left; height: 60px;border: 1px solid #acacac;margin-top: 6px;"
						mode=""
					></image>
					<view @tap="$go('/pages/echart/echart?obj=' + JSON.stringify(i))" class="lst-cen" style="float: left;font-size: 13px;margin-left: 10px;">
						<view class="" style="font-size: 16px;padding-bottom: 6px;font-weight: 650;">{{ i.traderName }}</view>
						<view style="font-size: 13px;padding-bottom: 2px;">
							<text style="color: #acacac;display: inline-block;">
								跟随人数
								<span style="color: #000000;padding-left: 5px;">{{ i.followTotalNum }}</span>
							</text>
						</view>
						<view class="" style="color: #acacac;padding-bottom: 2px;">
							适应金额
							<text style="color: #000000;padding-left: 5px;">{{ i.maxPosMargin }}</text>
						</view>
						<view class="" style="color: #acacac;padding-bottom: 2px;">
							品种
							<text style="color: #000000;padding-left: 5px;">{{ i.commodityNo ? i.commodityNo : '--' }}</text>
						</view>
						<view style="color: #acacac;padding-bottom: 2px;">
							每日限仓手数
							<text style="color: #000000;padding-left: 5px;">{{ i.limitDayOrders ? i.limitDayOrders + '手' : '不限' }}</text>
						</view>
						<view style="color: #acacac;padding-bottom: 2px;background: #f1f1f1;padding: 2px 5px;clear: both;float: left;margin-bottom: 3px;margin-top: 5px;">
							当前合约
							<text style="color: #000000;padding-left: 5px;">{{i.heyue}}</text>
						</view>
						<view style="color: #acacac;padding-bottom: 2px;background: #f1f1f1; clear: both;float: left;padding: 2px 5px;">
							当前盈亏
							<text style="padding:0 5px;" :style="{ color:Number(i.yink) > 0 ? i.bg?'#fff':'red' : i.bg?'#fff':'green' ,background:i.bg?Number(i.yink) > 0 ? 'red' : 'green':'none'}">{{ i.yink?i.yink:'--' }}</text>
						</view>
					</view>

					<view class="lst-rig" style="float: right;text-align: right;">
						<span
							v-if="i.myFocusState == 0"
							@tap="quxiao(i, 1)"
							style="margin-right: 3px; float: right;clear: both;margin-bottom: 2px; display: block;width: 34rpx;height: 34rpx;margin-top: 2px;"
						>
							<image src="../../static/img/add.png" style="width: 100%;height: 100%;" mode=""></image>
						</span>
						<span
							v-else
							@tap="quxiao(i, 0)"
							style="margin-right: 3px; float: right;clear: both;margin-bottom: 2px; display: block;width: 34rpx;height: 34rpx;margin-top: 2px;"
						>
							<image src="../../static/img/remove.png" style="width: 100%;height: 100%;" mode=""></image>
						</span>
						<span style="display: block;clear: both;font-size: 12px;color: #acacac;">自选</span>

						<view style="overflow: hidden;clear: both;margin-top:42rpx;">
							<text
								style="display: block;float: right;clear: both;font-size: 14px;color: red;max-width: 200rpx;overflow: hidden;text-overflow: ellipsis;padding: 0 4px;"
								:style="{ color: (Number(i.profit.toFixed(0)) + Number(i.yink)) > 0 ? i.bg?'#fff':'red' : i.bg?'#fff':'green' ,background:i.bg?(Number(i.profit.toFixed(0)) + Number(i.yink)) > 0 ?'red':'green':'none'}"
							>
								<!-- {{i.currencyCode}} -->

								<text style="color: #000;">{{ i.currencySymbol }}</text>
								{{ Number(i.profit.toFixed(0)) + Number(i.yink) }}
							</text>
							<text style="display: block;float: right;clear: both;font-size: 14px;margin-top: 10rpx;">账户盈亏</text>

							<view class="" style="text-align: center;">
								<span
									v-if="i.dealerFollowState == 0"
									@tap="$go('/pages/echart/gensui?obj=' + JSON.stringify(i),true)"
									style="display:block;margin-top: 32rpx; clear: both;font-size: 12px;padding: 3px 10px;background: #168deb;overflow: hidden;float: right;color: #fff;border-radius: 2px;"
								>
									订阅
								</span>
								<span
									v-else
									@tap="$go('/pages/center/detail?uid='+i.traderUid)"
									style="display:block;margin-top: 32rpx; clear: both;font-size: 12px;padding: 3px 10px;background: #168deb;overflow: hidden;float: right;color: #fff;border-radius: 2px;"
								>
									取消订阅
								</span>
								<text style="color: #ea7b4e;display: block;clear: both;font-size: 12px;text-align: right;padding-top: 10rpx;">{{ i.subPoint }}积分/手</text>
							</view>
						</view>
					</view>
				</view>
				<uni-text v-if="!o.traderList.length" style="height: 200x;font-size: 16px;text-align: center;display: block;color: red;padding: 60px 0;">
					暂无专区信息！
					<!-- <navigator url="../center/setshi" style="color:#168deb ;display: inline-block;">去添加</navigator> -->
				</uni-text>
			</view>
		</view>
		<view class="" v-if="!list">
			<uni-text style="height: 200x;font-size: 16px;text-align: center;display: block;color: red;padding: 200px 0;">
				暂无专区信息！
				<!-- <navigator url="../center/setshi" style="color:#168deb ;display: inline-block;">去添加</navigator> -->
			</uni-text>
		</view>
		
	</view>
</template>

<script>
export default {
	onNavigationBarButtonTap(e) {
		// console.log(e.index)
		if (e.index == 0) {
			this.$go('/pages/center/mycang');
		} else if (e.index == 1) {
			this.$go('/pages/paihang/so');
		}
	},
	data() {
		return {
			list: [],
			Time:{},
			show:true
		};
	},
	onHide() {
		clearInterval(this.Time);
		// uni.closeSocket();
	},
	methods: {
		getequitys: function(obj) {
			var num1 = 0;
			for (var i in obj.list) {
				var o = obj.list[i];
				num1 += parseInt(o.isHistoryNums) * o.tradeRate;
			}
		
			return num1;
		},
		xundata(){
			for(var i in this.list){
				var o = this.list[i];
				for(var is in o.traderList){
					var os = o.traderList[is];
					this.getcc2(os);
				}
			}
		},
		getheyue(o){
			var _this = this;
			var str = '';
			for(var i in o.list){
				str+=o.list[i].commodityNo+' ';
				this.getfuying(o.list[i],o);
			};
			if(!str) str = '--';
			o.heyue = str;
			setTimeout(function(){
				if(o.yink != _this.getequitys(o)){
					o.bg = true;
					setTimeout(function(){
						o.bg = false;
					},300);
					o.yink = _this.getequitys(o);
				};
			},1700)
		},
		getcc2: function(objs) {
			var _this = this;
			var token = _this.$store.state.user?_this.$store.state.user.token:'';
			// console.log(_this.$store.state.url1 + '/api/TradeUser2/getPosition?uids='+ objs.traderUid +'&token=' + token)
			uni.request({
				method: 'post',
				url: _this.$store.state.url1 + '/api/TradeUser2/getPosition?uids='+ objs.traderUid +'&token=' + token,
				success: function(data) {
					// console.log(data,'交易此仓列表')
					data = data.data;
					// console.log(data)
					if (data.code == 200) {
						if (!data.data.length) {
							return;
						}
						objs.list = data.data[0]['position2s'];
						_this.getheyue(objs);
					} else {
						
					}
				}
			});
		},
		getfuying: function(obj,d) {
			// obj
			var paran = obj.exchangeNo + ' ' + obj.commodityNo + ' ' + obj.contractDate;
			var _this = this;
			uni.request({
				method: 'get',
				url: _this.$store.state.url1 + '/api/Contracts2/getnowpri?ContractName=' + paran,
				header: {
					'content-type': 'application/json; charset=utf-8'
				},
				// data: JSON.stringify(json),
				success: function(data) {
					data = data.data;
					// console.log(data.data,'合约价格')
					if (data.code == 200) {
						if (data.data) {
							var json = data.data;
							// console.log(json.lastPrice-obj.buyPrice,json.lastPrice,obj.buyPrice)
							obj.isHistoryNums =
								obj.orderSide == 1
									? parseFloat(((json.lastPrice - obj.buyPrice) * obj.contMul * obj.nums).toFixed(3))
									: parseFloat(((obj.buyPrice - json.lastPrice) * obj.contMul * obj.nums).toFixed(3));
						} else {
							obj.isHistoryNums = 0;
						}
						// console.log(_this.getequitys(d))
						// if(d.yink !== _this.getequitys(d)){
						// 	d.bg = true;
						// 	setTimeout(function(){
						// 		d.bg = false;
						// 	},500)
						// };
						
					} else {
					}
				},
				fail: res => {
					console.log(res);
				}
			});
		},
		quxiao(obj, id) {
			if(!this.$store.state.user){
				this.$go('123',true)
				return;
			}
				
			var _this = this;
			uni.request({
				url:
					_this.$store.state.url +
					'/api/shequuser/mycenter/addoreidtmyfocus?ftoken=' +
					_this.$store.state.user.token +
					'&ftraderuid=' +
					obj.traderUid +
					'&ftraderacc=' +
					obj.traderName +
					'&fstate=' +
					id,
				method: 'POST',
				// data: _this.param,

				success: res => {
					res = res.data;
					if (res.code == 200) {
						if (id == 1) {
							uni.showToast({
								title: '已关注！',
								icon:'none',
								duration: 2000
							});
							obj.myFocusState = 1;
						} else {
							uni.showToast({
								title: '已取消！',
								duration: 2000,
								icon:'none'
							});
							obj.myFocusState = 0;
						}
						// _this.$store.commit('getcollection');
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000

							// position:'top'
						});
					}
				},
				fail: res => {
					console.log(res);
				}
			});
		},
		getdata() {
			var _this = this;
			uni.request({
				method: 'get',
				url: _this.$store.state.user
					? _this.$store.state.url1 + '/api/GWDataShow/GetHomeRankingList?token=' + _this.$store.state.user.token
					: _this.$store.state.url1 + '/api/GWDataShow/GetHomeRankingList',
				// contentType: "application/json;",
				// data:json,
				// data: json,
				success: function(data) {
					// console.log(data,'交易此仓列表')
					data = data.data;
					// console.log(data)
					if (data.code == 200) {
						for(var o in data.data){
							for(var i in data.data[o].traderList){
								data.data[o].traderList[i].yink = 0;
								data.data[o].traderList[i].heyue = '';
								data.data[o].traderList[i].bg = false;
							}
						};
						_this.list = data.data;
						_this.xundata();
						_this.Time = setInterval(function(){
							_this.xundata();
						},2000);
						// console.log(_this.list)
					} else {
					}
				}
			});
		}
	},
	onShow() {
		// console.log(this.statusBar,this.customBar);
		var _this = this;
		
		uni.getNetworkType({
			success: function(res) {
				if (res.networkType == 'none') {
					uni.showToast({
						title: '当前无网络连接，请检查！',
						icon: 'none',
						duration: 5000

						// position:'top'
					});
				}
			}
		});
		uni.onNetworkStatusChange(function(res) {
			if (!res.isConnected) {
				uni.showToast({
					title: '当前无网络连接，请检查！',
					icon: 'none',
					duration: 3000
					// position:'top'
				});
			} else {
				uni.showToast({
					title: '网络已连接！',
					icon: 'none',
					duration: 3000
					// position:'top'
				});
				_this.getdata();
			}
		});
		_this.getdata();
	}
};
</script>
<style></style>
